<template>
  <div class="login-container">
      <el-form :model="ruleForm" :rules="rules" ref="ruleFormRef">
          <div class="title-container">
              <h3 class="title">欢迎登录，请先重置密码</h3>
          </div>
          <el-form-item label="原密码" prop="oldPassword">
              <el-col :span="8">
                  <el-input v-model="ruleForm.oldPassword" placeholder="请输入原密码" type="password"></el-input>
              </el-col>
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword">
              <el-col :span="8">
                  <el-input v-model="ruleForm.newPassword" placeholder="请输入新密码" id="newkey" type="password"></el-input>
              </el-col>
          </el-form-item>
          <el-form-item label="重复新密码" prop="checkNewPassword">
              <el-col :span="8">
                  <el-input v-model="ruleForm.checkNewPassword" placeholder="请再次输入新密码" id='newkey1' type="password"></el-input>
              </el-col>
          </el-form-item>
      </el-form>
  </div>
</template>

<script>
import { isvalidPassword } from '@/utils/validate'
import LangSelect from '@/components/LangSelect'

export default {
    name: 'Login',
    components: { LangSelect},
    data() {
        var validatePass2 = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请再次输入密码"));
            } else if (value !== this.ruleForm.newpass) {
                callback(new Error("两次输入密码不一致!"));
            } else {
                callback();
            }
        };
        return {
            ruleForm: {
                oldPassword: '',
                newPassword: '',
                checkNewPassword: ''
            },
            rules: {
                oldPassword: [{ required: true, message: "请输入密码" }],
                newPassword: [{ required: true, message: "请输入新密码" }],
                checkNewPassword: [{ required: true, validator: validatePass2, trigger: "blur" }]
            }
        }
    },
    methods: {
      handleResetPassword() {
          this.$refs.loginForm.validate(valid => {
            if (valid) {
              this.loading = true
              this.$store.dispatch('LoginByUsername', this.loginForm).then(() => {
                this.loading = false
                // this.$router.push({ path: this.redirect || '/' })
                this.$router.push({ path: '/resetPassword' })
              }).catch(() => {
                this.loading = false
              })
            } else {
              console.log('error submit!!')
              return false
            }
          })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  $bg:#283443;
  $light_gray:#eee;
  $cursor: #fff;

  @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
    .login-container .el-input input{
      color: $cursor;
      &::first-line {
        color: $light_gray;
      }
    }
  }

  /* reset element-ui css */
  .login-container {
    .el-input {
      display: inline-block;
      height: 47px;
      width: 85%;
      input {
        background: transparent;
        border: 0px;
        -webkit-appearance: none;
        border-radius: 0px;
        padding: 12px 5px 12px 15px;
        color: $light_gray;
        height: 47px;
        caret-color: $cursor;
        &:-webkit-autofill {
          -webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
          -webkit-text-fill-color: $cursor !important;
        }
      }
    }
    .el-form-item {
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      color: #454545;
    }
  }
</style>
